import React, { Component } from 'react'
import MyNavBar from 'components/navbar';
import styles from './index.less'
import { List } from 'antd-mobile'
import router from 'umi/router';
import { Button, Toast } from 'antd-mobile'
import { connect } from 'dva'
import { MyIcon } from 'components/my-icon';
import { AUTHENTICATION_FAIL_CODE } from 'utils/Enum'
import { getIsDingTalk } from 'utils/utils';
import commonStyles from 'utils/common.less';
import { PROCESS_STATUS } from '../../utils/Enum';
import {isDingTalk,dingTalkBack,backToOut} from 'utils/utils'
/**
 * @description 企业认证方式列表页面备份页面
 * @author 马羽
 * @date 2019-12-26
 * @class EnterpriseCertificationListBackUps
 * @extends {Component}
 */
class EnterpriseCertificationListBackUps extends Component {

   /**
    * 请求状态，判断是否认证成功
    */

   constructor(props){
     super(props)
     this.state={
       successNum:0,
       buttonDisable:true
     }
   }
   componentDidMount() {
    Toast.loading('查询数据中', 0)
     let userWsid = localStorage.getItem('userWsid')
    let { dispatch } = this.props
    dispatch({
      type: 'EnterpriseCertificationListBackUpsModel/getStatus',
      payload: {
        userWsid
      },
      callback: status => {
        if(status === 'success') {
          Toast.hide();
        } else {
          Toast.fail('获取状态失败!');
        }
        const { options } = this.props;
        let type=1
         options.forEach((item)=>{
          if(item.status!=='success'){
            type= -1
          }
        })
        if(type===1){
          this.setState({buttonDisable:false})
        }else {
          this.setState({buttonDisable:true})
        }
      }
    })

   }
  render() {
    const isDingTalk=getIsDingTalk()
    const {buttonDisable}=this.state
    const Session = localStorage.getItem('Session')
    const enterType = localStorage.getItem('enterType')
    const returnUrl = localStorage.getItem('returnUrl')
    const { options } = this.props;
    let status = options[0].status
    const Item = List.Item;
    const Brief = Item.Brief;
    const nextUrl = status === 'padding' || status === 'error' ?
                      `/PersonalCertification?urlBack=EnterpriseCertificationListBackUps&type=${AUTHENTICATION_FAIL_CODE.EUSR}&url=EnterpriseCertificationListBackUps&enterType=${enterType}&Session=${Session}&Certification=${PROCESS_STATUS.UNKOWN_EAUTHORIZING_APPLY}`
                      :
                      '/EnterpriseCertificationInformation'

    // const contentContainer=styles.list+' '+commonStyles.headerTop
    const contentContainer=isDingTalk==='true'?styles.list:styles.list+' '+commonStyles.headerTop
    return (
      <div className={styles.baseLayout}>
        <MyNavBar title={'企业认证'} backUrl={`/EnterpriseCertificationList`} />
        <div className={styles.listWrapper}>
          <List className={contentContainer}>
            {
              options.map((item, index) => {
                return (
                  <Item
                    // arrow="horizontal"
                    className={styles.item}
                    thumb={this.productionTtepBar(item.status, index+1)}
                    multipleLine
                    key={item.id + item.status}
                  >
                    {item.title}
                    {
                      item.msg ?
                        <Brief>{item.msg}</Brief>
                        :
                        null
                    }
                  </Item>
                )
              })
            }
          </List>
        </div>
        <div className={styles.btnWrapper}>
          <Button onClick={this.goAuthentication.bind(this, nextUrl)}
                  type="primary" className={styles.btn}>{buttonDisable ? '继续填写' : '已完成'}</Button>
        </div>
      </div>
    )
  }

  //跳转实名认证函数
  goAuthentication = url => {
    const { buttonDisable } = this.state;
    const returnUrl = localStorage.getItem('returnUrl');
    if(buttonDisable){
      router.push(url)
    }
   else{
      backToOut();
    }
  };

  //产生步骤条的jsx函数，传入状态
  productionTtepBar = (state, index) => {
    //上部线条
    let LineTop = (
      <div style={{
        top: 0,
        position: 'absolute',
        height: '14px',
        width: '1px',
        background : 'rgba(17,31,44,0.28)',
        marginLeft: '17.5px'
      }}></div>
    )
    //下部分线条
    let LineBottom = (
      <div style={{
        position: "absolute",
        height: '14px',
        width: '1px',
        background : 'rgba(17,31,44,0.28)',
        marginLeft: '17.5px'
      }}></div>
    )
    //产生圆的函数
    let circular = content => {
      if(typeof content === 'number') {
        return (
          <div style={{
            width: '36px',
            height: '36px',
            borderRadius: '50%',
            lineHeight: '36px',
            textAlign: 'center',
            border: '1px solid rgba(17,31,44,0.28)',
            color: 'rgba(17, 31, 44, 0.56)',
            fontSize: '14px'
          }}>{content}</div>
        )
      } else if(content === 'error') {
        return (
          <MyIcon type="iconClose" style={{
            fontSize: '36px',
            color: 'rgba(251, 96, 45, 1)'
          }}></MyIcon>
        )
      } else {

        return (
          <MyIcon type="iconqueren" style={{
            fontSize: '36px',
            color: 'rgba(0, 184, 83, 1)'
          }}></MyIcon>
        )

      }
    }
    if(state === 'padding') {
      return (
        <>
          {
            index === 1 ?
              <div>
                {circular(index)}
                {LineBottom}
              </div>
              :
              <div>
                {LineTop}
                {circular(index)}
              </div>
          }
        </>
      )
    } else if(state === 'error') {
      return (
        <>
          {
            index === 1 ?
              <div>
                {circular('error')}
                {LineBottom}
              </div>
              :
              <div>
                {LineTop}
                {circular('error')}
              </div>
          }
        </>
      )
    } else {
      return (
        <>
          {
            index === 1 ?
              <div>
                {circular('success')}
                {LineBottom}
              </div>
              :
              <div>
                {LineTop}
                {circular('success')}
              </div>
          }
        </>
      )
    }
  }
}


const mapStateToProps = state => {
  let { options = [] } = state.EnterpriseCertificationListBackUpsModel
  return {
    options
  }
}

export default connect(mapStateToProps)(EnterpriseCertificationListBackUps)
